<template>
	<div class="unit">
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon>
			<el-form-item
				label="应用终止时使用费用"
				prop="terminationCost"
				:rules="[
					{
						required: true,
						pattern: /^(0|[1-9]\d{0,5})(\.(?!(0$|.*0$)\d*)\d{1,6})?$/,
						message: '请输入正确的金额',
					},
				]"
			>
				<el-input style="max-width: 300px" v-model="ruleForm.terminationCost" placeholder="请输入金额">
					<template #append>万</template>
				</el-input>
			</el-form-item>
			<el-form-item label="应用终止原因:" prop="reason">
				<el-input v-model="ruleForm.reason" type="textarea" :rows="3" maxlength="2000" show-word-limit />
			</el-form-item>
			<el-form-item label="应用终止时已建设内容:" prop="completedContent">
				<el-input v-model="ruleForm.completedContent" type="textarea" :rows="3" maxlength="2000" show-word-limit />
			</el-form-item>
			<el-form-item label="应用终止时未建设内容:" prop="uncompletedContent">
				<el-input v-model="ruleForm.uncompletedContent" type="textarea" :rows="3" maxlength="2000" show-word-limit />
			</el-form-item>
			<el-form-item label="应用变更审批文件:" prop="files">
				<TsyUploadFile
					type="submit"
					:fileType="['.rar', '.zip', '.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png']"
					:fileSize="200"
					v-model="ruleForm.files"
				/>
			</el-form-item>
		</el-form>
		<div class="bott_box">
			<el-button :loading="saveLoading" plain class="wihte-button" @click="save(ruleFormRef)">保存</el-button>
			<el-button :ioading="subLoading" plain class="blue-button" @click="shenBao(ruleFormRef)">申报</el-button>
		</div>

		<!-- submitPass 为审核成功后的回调函数 -->
		<Start ref="startRef" @submitPass="submitPass"></Start>
	</div>
</template>

<script lang="ts" setup>
import { terminateSave, terminateApprove, terminateDetail, terminateSubmit } from '/@/api/Implementation/tableImple';
import TsyUploadFile from '/@/components/HyUpload/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// //申报组件
import Start from '@cqdcg/admin/views/flow/form/tools/startFlow';
import mittBus from '/@/utils/mitt';
import { toRefs, defineProps, reactive, ref, onMounted, nextTick, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
function handleBack() {
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
	router.push({
		path: '/digitalImplement/ImplemTer/index',
	});
}

const props = defineProps({
	terminate: {
		type: Object,
	},
	message: {
		type: String,
	},
	id: {
		type: String,
	},
});
watch(
	() => props.terminate,
	(data) => {
		ruleForm.value = { ...data };
	}
);
onMounted(() => {
	//获取详情，编辑的时候
	// nextTick(() => {
	// 	getChangeDetail();
	// });
});
const saveLoading = ref(false);
const subLoading = ref(false);
const ruleFormRef = ref();
const ruleForm: any = ref({
	appCode: '',
	terminationCost: '',
	reason: '',
	completedContent: '',
	uncompletedContent: '',
	files: [],
});
const rules = reactive({
	terminationCost: [{ required: true, message: '请输入应用终止时使用费用', trigger: 'blur' }],
	reason: [{ required: true, message: '请输入应用终止原因', trigger: 'blur' }],
	completedContent: [{ required: true, message: '请输入应用终止时已建设内容', trigger: 'blur' }],
	uncompletedContent: [{ required: true, message: '请输入应用终止时未建设内容', trigger: 'blur' }],
	files: [
		{
			required: true,
			message: '请上传文件',
			trigger: 'change',
		},
	],
});
//获取应用变更详情
const getChangeDetail = () => {
	let appCode = message?.value;
	if (!appCode) {
		return;
	}
	terminateDetail(appCode).then((res) => {
		if (res.code == 0) {
			if (res.data.terminate) {
				ruleForm.value = res.data.terminate;
			}
		}
	});
};
const businessKey = ref('');
//保存
const save = async (formEl: any) => {
	let appCode = message;
	let ids: any = id;
	let data = ruleForm.value;
	data.appCode = appCode;
	data.implementationId = ids;
	if (businessKey.value) {
		data.id = businessKey.value;
	}

	if (!formEl) return;
	await formEl.validate((valid: any, fields: any) => {
		if (valid) {
			saveLoading.value = true;
			terminateSave(data)
				.then((res) => {
					if (res.code == 0) {
						ElMessage({
							message: '保存成功',
							type: 'success',
						});
						handleBack();
						saveLoading.value = false;
					}
				})
				.catch(() => {
					saveLoading.value = false;
				});
		} else {
		}
	});
};
//申报
const startRef = ref(null);

const shenBao = async (formEl: any) => {
	let appCode = message;
	let ids: any = id;
	let data = ruleForm.value;
	data.appCode = appCode;
	data.implementationId = ids;
	if (businessKey.value) {
		data.id = businessKey.value;
	}

	if (!formEl) return;
	await formEl.validate((valid: any, fields: any) => {
		if (valid) {
			subLoading.value = true;
			terminateSubmit(data)
				.then((res) => {
					if (res.code == 0) {
						businessKey.value = res.data.businessKey;
						let basicData = res.data;
						startRef?.value?.handle({
							flowName: basicData.flowName,
							businessKey: basicData.businessKey,
							paramMap: {},
						});
					}
				})
				.catch(() => {
					subLoading.value = false;
				});
		} else {
			console.log('error submit!', fields);
		}
	});
};
//审核通过
const submitPass = () => {
	handleBack();
	// mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
};

const { message, id } = toRefs(props);
</script>

<style lang="scss" scoped>
.unit {
	padding-bottom: 20px;
	.bott_box {
		position: absolute;
		left: 0px;
		bottom: 0px;
		margin-top: 10px;
		width: 100%;
		padding: 10px 0;
		text-align: center;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
		flex-grow: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	:deep(.el-input-number .el-input__inner) {
		text-align: left;
	}
}
</style>
